<template>
  <view class="vip-container">
    <!-- 用户信息-->
      <view class="my-header">
        <view class="header-main">
          <view class="header-content">
            <image class="logo-img" src="/static/img/icons3.png" mode="aspectFill" />
            <view class="info-container">

              <view class="name-wrapper">
                <image class="user-type-icon" :src="userTypeIcon" mode="aspectFit" />
                <text class="logo-name">用户昵称</text>

              </view>

              <view class="stats">
                <view class="stat-item">
                  <image class="stat-icon" src="/static/img/balance.png" mode="aspectFit" />
                  <text class="balance">余额：{{ formattedBalance }}</text>
                </view>

                <view class="stat-item">
                  <image class="stat-icon" src="/static/img/points.png" mode="aspectFit" />
                  <text class="points">积分：{{ points }}</text>
                </view>
              </view>

            </view>
          </view>
        </view>
      </view>
    <!-- 充值模块 -->
    <view class="recharge-section">
      <text class="recharge-title">快速充值</text>
      <view class="recharge-buttons">
        <button class="recharge-btn" @click="recharge(10)">10元</button>
        <button class="recharge-btn" @click="recharge(30)">30元</button>
        <button class="recharge-btn" @click="recharge(50)">50元</button>
        <button class="recharge-btn" @click="recharge(100)">100元</button>
      </view>
    </view>
    <!-- 底部支付弹窗 -->
    <view v-if="showPaymentPopup" class="payment-popup">
      <view class="popup-content">
        <text class="popup-title">请选择支付方式</text>
        <view class="payment-options">
          <view
              class="payment-item"
              @click="selectPayment('wechatPay')"
              :class="{ active: selectedPayment === 'wechatPay' }"
          >
            <view class="payment-text">
              <image src="/static/img/wechat-pay.png" mode="aspectFit" class="payment-icon" />
              <text>微信支付</text>
            </view>
            <view class="checkbox">
              <text v-if="selectedPayment === 'wechatPay'">✔</text>
            </view>
          </view>

          <view
              class="payment-item"
              @click="selectPayment('alipay')"
              :class="{ active: selectedPayment === 'alipay' }"
          >
            <view class="payment-text">
              <image src="/static/img/alipay-pay.png" mode="aspectFit" class="payment-icon" />
              <text>支付宝支付</text>
            </view>
            <view class="checkbox">
              <text v-if="selectedPayment === 'alipay'">✔</text>
            </view>
          </view>
        </view>
        <!-- 按钮区域 -->
        <view class="popup-buttons">
          <button class="btn-cancel" @click="closePaymentPopup">取消</button>
          <button class="btn-confirm" @click="confirmPayment">确认支付</button>
        </view>

      </view>
    </view>

    <!-- vip权益 -->
    <view class="vip-benefits">
      <text class="benefits-title">VIP 用户权益</text>
      <view class="benefits-list">
        <view class="benefit-item">
          <text>1、优先开台特权</text>
        </view>
        <view class="benefit-item">
          <text>2、每月赠送额外积分</text>
        </view>
        <view class="benefit-item">
          <text>3、参与专属活动和优惠</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      showPaymentPopup: false, // 控制弹窗显示
      currentAmount: 0,      // 当前待充值金额
      selectedPayment: null // 新增：记录选择的支付方式
    };
  },
  computed: {
    userTypeIcon() {
      return this.isVip ? '/static/img/user-vip.png' : '/static/img/user-normal.png';
    },
    formattedBalance() {
      return this.balance.toFixed(2); // 格式化为两位小数
    },
    ...mapState('balanceAndPoints', ['balance', 'points', 'isVip']),
  },

  methods: {
    ...mapActions('balanceAndPoints', ['updateBalance', 'updatePoints']),

    recharge(amount) {
      uni.showModal({
        title: '确认充值',
        content: `是否确认充值 ${amount} 元？`,
        success: (res) => {
          if (res.confirm) {
            this.currentAmount = amount;
            this.showPaymentPopup = true;
          } else if (res.cancel) {
            uni.showToast({ title: '已取消', icon: 'none' });
          }
        }
      });
    },
    closePaymentPopup() {
      this.showPaymentPopup = false;
    },
    wechatPay() {
      uni.showToast({ title: `正在使用微信支付 ${this.currentAmount} 元`, icon: 'none' });
      this.simulatePayment();
    },
    alipay() {
      uni.showToast({ title: `正在使用支付宝支付 ${this.currentAmount} 元`, icon: 'none' });
      this.simulatePayment();
    },
    ...mapActions('balanceAndPoints', ['updateBalance']),
    simulatePayment() {
      setTimeout(() => {
        uni.showToast({ title: '支付成功！积分+${this.currentAmount}', icon: 'success' });

        const newBalance = this.$store.state.balanceAndPoints.balance + this.currentAmount;
        const newPoints = this.$store.state.balanceAndPoints.points + this.currentAmount; // 积分等于充值金额

        this.updateBalance(newBalance); // 更新余额
        this.$store.dispatch('balanceAndPoints/updatePoints', this.currentAmount); // 调用 updatePoints action（会自动处理 VIP 判断）
        // 关闭弹窗
        this.showPaymentPopup = false;
      }, 1000);
    },
    selectPayment(type) {
      this.selectedPayment = type;
    },
    confirmPayment() {
      if (!this.selectedPayment) {
        uni.showToast({ title: '请选择支付方式', icon: 'none' });
        return;
      }
      uni.showToast({
        title: `正在使用${this.selectedPayment === 'wechatPay' ? '微信' : '支付宝'}支付 ${this.currentAmount} 元`,
        icon: 'none'
      });
      this.simulatePayment();
    },

  },
};
</script>

<style scoped>
.vip-container {
}

.my-header {
  background: bisque;
  background-size: cover;
  width: 100%;
  height: 300rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

.header-main {
  width: 100%;
  padding: 0 40rpx; /* 左右边距保留 */
}

.header-content {
  display: flex;
  align-items: center; /* 垂直居中 */
  background-color: rgba(255, 255, 255, 0.3); /* 可选背景色 */
  border-radius: 16rpx;
  padding: 20rpx;
}

.logo-img {
  width: 140rpx;
  height: 140rpx;
  border: 2rpx solid #FFFFFF;
  border-radius: 50%;
  background-color: #FFFFFF;
  margin-right: 30rpx; /* 头像与文字间距 */
  margin-left: 20rpx;
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-name {
  font-size: 34rpx;
  color: black;
  font-weight: bold;
  margin-bottom: 10rpx;
  height: 40rpx; /* 可选，固定高度便于控制 */
}

.name-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-type-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
  vertical-align: middle;
}

.stats {
  display: flex;
  font-size: 28rpx;
  color: #666;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.stat-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.points {
  margin-right: 0; /* 最后一个 stat-item 去除右边距 */
}

.balance{
  margin-right: 20rpx;
}

.points {
  margin-right: 0; /* 最后一个不加右边距 */
}

.recharge-section {
  padding: 30rpx 40rpx;
  background-color: #fff8e7; /* 柔和背景色 */
  margin-bottom: 40rpx;
  border-radius: 10rpx;
}

.recharge-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  display: block;
}

.recharge-buttons {
  display: flex;
  flex-wrap: wrap; /* 支持换行 */
  gap: 20rpx; /* 按钮间距 */
}

.recharge-btn {
  flex: 1 1 calc(50% - 10rpx); /* 两列布局 */
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  background-color: #ffd966;
  color: #333;
  border-radius: 40rpx;
  padding: 0;
}

.payment-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx; /* 四角圆角 */
  width: 80%;
  max-width: 600rpx;
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 40rpx;
  text-align: center;
}

.payment-options button {
  margin-bottom: 30rpx;
  background-color: #4CAF50;
  color: white;
}

.payment-options .payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #eee;
}

.payment-options .payment-item.active {
  background-color: #f5f5f5;
}

.payment-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.payment-text {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #07c160;
}

.popup-buttons {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
}

.popup-buttons .btn-cancel,
.popup-buttons .btn-confirm {
  flex: 1;
  margin: 0 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
}

.btn-cancel {
  background-color: #e0e0e0;
  color: #666;
}

.btn-confirm {
  background-color: #4CAF50;
  color: white;
}

.vip-benefits {
  padding: 0 40rpx;
  margin-top: 40rpx;
}

.benefits-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  text-align: center;
  margin-bottom: 30rpx;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.benefit-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

</style>
